{{template "head.tmpl" .}}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">Add stream</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Add stream</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</div>




  <section class="content">
    <div class="container-fluid">
      <div class="row" id="streams-form-wrapper">

        <div class="col-12">
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Main channel<small> parameters</small></h3>
            </div>
              <div class="card-body">
                <form class="stream-form main-form">
                <div class="form-group">
                  <label for="exampleInputEmail1">Stream name</label>
                  <input type="text" class="form-control" name="stream-name" placeholder="Enter stream name" id="stream-name">
                  <small  class="form-text text-muted">You can choose any name for the stream, for example "My room" or  "Happy sausage"</small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Stream url</label>
                  <input type="text" name="stream-url" class="form-control"  placeholder="Enter stream url">
                  <small  class="form-text text-muted">Enter rtsp address as instructed by your camera. Look like <code>rtsp://&lt;ip&gt;:&lt;port&gt;/path </code> </small>
                </div>
                <div class="form-group">
                  <label for="inputStatus">Stream type</label>
                  <select class="form-control custom-select" name="stream-ondemand">
                    <option selected disabled><small>Select One</small></option>
                    <option value="1">On demand only</option>
                    <option value="0">Persistent connection</option>
                  </select>
                  <small  class="form-text text-muted">On persistent connection, the server get data from the camera continuously. On demand, the server get data from the camera only when you click play button </small>
                </div>
                <div class="form-group">
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" name="debug" id="debug-switch">
                    <label class="custom-control-label" for="debug-switch">Enable debug</label>
                  </div>
                  <small  class="form-text text-muted">Select this options if you want get more data about the stream </small>
                </div>
              </form>
              </div>
            </div>
          </div>
          </div>

        <div class="row  mb-3">
            <div class="col-12">
              <button type="button" onclick="addChannel()" class="btn btn-secondary">Add channel</button>
              <button type="button" onclick="addStreamSubmit()" class="btn btn-primary">Save stream</button>
            </div>
        </div>
    </div>
  </section>

{{template "foot.tmpl" .}}

<script>
function addStreamSubmit(){
  var params = {
    uuid:randomUuid(),
    name:$('#stream-name').val(),
    channels:{}
  }

  $('.stream-form').each(function(i){
    params.channels[i]={
        url:$(this).find('input[name="stream-url"]').val(),
        on_demand:Boolean(parseInt($(this).find('select[name="stream-ondemand"]').val())),
        debug:Boolean($(this).find('input[name="debug"]').prop('checked')),
    }
    if(params.channels[i].on_demand==null){
      params.channels[i].on_demand==true;
    }
  });
  goRequest('add', params.uuid, params);
}




</script>
